<template>
  <div>
    <el-card class="!border-none mb-4" shadow="never">
      <el-form class="mb-[-16px]" :model="queryParams" inline>
        <el-form-item label="院区楼栋">
          <el-cascader :options="optionsData.building" clearable v-model="queryParams.building" filterable
                       :props="props1"/>
        </el-form-item>
        <el-form-item label="科室代码" prop="department_sn">
          <el-cascader :options="optionsData.department" clearable v-model="queryParams.department" filterable
                       :props="props1"/>
        </el-form-item>

        <el-form-item label="记录时间">
          <daterange-picker v-model:startTime="queryParams.create_time_start"
                            v-model:endTime="queryParams.create_time_end"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="resetPage">查询</el-button>
          <el-button @click="resetParams">重置</el-button>
          <export-data class="ml-2.5" :fetch-fun="apiRoomDepartmentDeviceLists" :params="queryParams"
                       :page-size="pager.size"/>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="!border-none" v-loading="pager.loading" shadow="never">
      <div class="mt-4">
        <el-table v-loading="pager.loading" :data="pager.lists" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"/>
          <!--					<el-table-column label="设备编号" prop="id" show-overflow-tooltip width="100" />-->
          <!--					<el-table-column label="设备信息" prop="devices" show-overflow-tooltip width="150" />-->
          <el-table-column label="设备信息" show-overflow-tooltip width="150">
            <template #default="{ row }">
              <!--              <view v-if="row.device">-->
              {{ row.device_name }} <br/>
              {{ row.device_no }} <br/>
              <!--                {{ row.device_type }}-->
              <!--              </view>-->
            </template>
          </el-table-column>
          <!--					<el-table-column label="科室信息" prop="departments" show-overflow-tooltip width="200" />-->
          <el-table-column label="科室信息" show-overflow-tooltip width="200">
            <template #default="{ row }">
              <view v-if="row.room">
                {{ row.room.name }} <br/>
                {{ row.room.building_text }} <br/>
                <!--                              {{ row.device_type }}-->
              </view>
            </template>
          </el-table-column>
          <el-table-column label="设备类型" prop="device.device_type" show-overflow-tooltip width="100"/>
          <el-table-column label="底数" prop="base_number" show-overflow-tooltip width="100"/>
          <el-table-column label="读数" prop="reading" show-overflow-tooltip width="100"/>
          <el-table-column label="用量" prop="use_total" show-overflow-tooltip width="100"/>
          <el-table-column label="系数" prop="coefficient" show-overflow-tooltip width="100"/>
          <el-table-column label="水电价" prop="price" show-overflow-tooltip width="100"/>
          <el-table-column label="费用" prop="total_fee" show-overflow-tooltip width="100"/>
          <el-table-column label="电梯费" prop="lift_fee" show-overflow-tooltip width="100"/>
          <el-table-column label="二次加压费" prop="second_pressure_fee" show-overflow-tooltip width="100"/>
          <el-table-column label="总费用" prop="total_money" show-overflow-tooltip width="100"/>
          <el-table-column label="最后记录时间" prop="log_time" show-overflow-tooltip width="160"/>
        </el-table>
      </div>
      <div class="flex mt-4 justify-end">
        <pagination v-model="pager" @change="getLists"/>
      </div>
    </el-card>
    <edit-popup v-if="showEdit" ref="editRef" :dict-data="dictData" @success="getLists" @close="showEdit = false"/>
  </div>
</template>
<script lang="ts" setup name="roomDepartmentLists">
import {usePaging} from '@/hooks/usePaging'
import {useDictData, useDictOptions} from '@/hooks/useDictOptions'
import {
  buildingAll,
  departmentAll
} from '@/api/room/room_department'
import {
  apiRoomDepartmentDeviceLists,
} from '@/api/room/room_department_device'
import feedback from '@/utils/feedback'
import EditPopup from './edit.vue'

const props1 = {
  checkStrictly: true
}

const editRef = shallowRef<InstanceType<typeof EditPopup>>()
// 是否显示编辑框
const showEdit = ref(false)

const {optionsData} = useDictOptions<{
  building: any[]
  department: any[]
}>({
  building: {
    api: buildingAll
  },
  department: {
    api: departmentAll
  }
})

// 查询条件
const queryParams = reactive({
  building: [],
  department: [],
  create_time_start: '',
  create_time_end: ''
})

// 选中数据
const selectData = ref<any[]>([])

// 表格选择后回调事件
const handleSelectionChange = (val: any[]) => {
  selectData.value = val.map(({id}) => id)
}

// 获取字典数据
const {dictData} = useDictData('')

// 分页相关
const {pager, getLists, resetParams, resetPage} = usePaging({
  fetchFun: apiRoomDepartmentDeviceLists,
  params: queryParams
})
onActivated(() => {
  getLists()
})
getLists()
</script>